<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
    <title>Calculator</title>
    <link rel="stylesheet" href="style/calculator.css"/>
	<script defer="defer" src="js/gamma.js"></script>
	<script defer="defer" src="js/calculator.js"></script>
	<script defer="defer" src="js/core.js"></script>
  </head>
  <body>
    <div id="display"><textarea readonly="readonly" disabled="disabed" id="inputValue" ></textarea><div id="HexResult"></div></div>
    <div id="panel">
	    <div class="block1">
			<div class="key_column">
				<!-- ******************************************** -->
				<a class="small" value="2Hex" data-type="operator" onclick="hex(this)">2Hex</a>
				<a class="small" value="8Hex" data-type="operator" onclick="hex(this)">8Hex</a>
				<!-- ******************************************** -->
				<a class="small" value="sin(" data-type="operator">sin</a>				
				<a class="sup" value="^2" data-type="operator"><p>x<sup>2</sup></p></a>
				<a class="" value="(" data-type="command">(</a>
			</div>
		    <div class="key_column">
				<a class="" value="√(" data-type="operator">√</a>
				<!-- ******************************************** -->
				<a class="small" value="10Hex" data-type="operator" onclick="hex(this)">10Hex</a>
				<!-- ******************************************** -->
				<a class="small" value="cos(" data-type="operator">cos</a>
			    <a class="sup" value="^" data-type="operator"><p>x<sup>y</sup></p></a>
			    <a class="" value=")" data-type="command">)</a>
		    </div>
		    <div class="key_column">
				<a class="" value="%" data-type="operator">%</a>
				<!-- ******************************************** -->
				<a class="small" value="16Hex" data-type="operator" onclick="hex(this)">16Hex</a>
				<!-- ******************************************** -->
			    <a class="small" value="tan(" data-type="operator">tan</a>
			    <a class="" value="e" data-type="specialValue">e</a>
			    <a class="" value="π" data-type="specialValue">π</a>
		    </div>
	    </div>
	    <div class="block2">
		    <div class="key_column2">
			    <a value="C" data-type="command">C</a>
			    <a class="num" value="7" data-type="value">7</a>
			    <a class="num" value="4" data-type="value">4</a>
			    <a class="num" value="1" data-type="value">1</a>
			    <a class="num" value="0" data-type="value">0</a>
		    </div>
		    <div class="key_column2">
			    <a class="" value="÷" id="add" data-type="operator">÷</a>
			    <a class="num" value="8" data-type="value">8</a>
			    <a class="num" value="5" data-type="value">5</a>
			    <a class="num" value="2" data-type="value">2</a>
			    <a class="num" value="." data-type="value">.</a>
		    </div>
		    <div class="key_column2">
			    <a class="" value="x" id="multiply" data-type="operator">x</a>
			    <a class="num" value="9" data-type="value" >9</a>
			    <a class="num" value="6" data-type="value" >6</a>
			    <a class="num" value="3" data-type="value" >3</a>
			    <a class="num" value="+/-" data-type="command">+/-</a>
		    </div>
		    <div class="key_column2">
			    <a value="<" id="backspace" data-type="command" ><</a>
			    <a value="-" id="subtract" data-type="operator">－</a>
			    <a value="+" id="divide" data-type="operator">+</a>
			    <a value="=" data-type="command" >=</a>
		    </div>
	    </div>
	</div>
	<script>
	/**
	 * 获得输入的第一个值，进行对应的进制转化
	 * 把返回值负值给相应的div
	 * */
	function hex(str){
		var hexValue = str.innerHTML
		/**
		 * 先检测div中是否有值
		 * 是：取出--进行进行转化
		 * 否：提示输入
		 * */
		var firstValue = document.getElementById('HexResult').innerHTML
		var num = 0
		if (firstValue === '' || firstValue == 0) {
			alert('请输入值再计算')
		} else {
			num = firstValue
		}
		/**
		 * 判断上面的div内容包括多少个Hex
		 * 如果 大于等于 1 清空
		 * 如果小于1 不处理
		 * **/

		if (hexValue === "2Hex") {
			var result = parseInt(num).toString(2)
			document.getElementById('HexResult').innerHTML= result
		} else if (hexValue === "8Hex") {
			var result = parseInt(num).toString(8)
			document.getElementById('HexResult').innerHTML= result
		} else if (hexValue === "10Hex") {
			document.getElementById('HexResult').innerHTML= num
		} else {
			var result = parseInt(num).toString(16)
			document.getElementById('HexResult').innerHTML= result.toUpperCase()
		}

	}
	</script>
  </body>
</html>
